import React from "react";
import style from "./style.module.scss";
import { ChatItemState } from "../../pages/ask/chatDialog";
import { WDImage } from "../wd-image";
import { stringReplaceEmoji } from "../../utils/emoji";
import { formatTime, formatTimeByCurrentTime } from "../../utils";

interface PropsType {
  v: ChatItemState;
  showTime?: boolean;
}

export const WdChatItem: React.FC<PropsType> = ({ v, showTime = false }) => {
  const classname = v.direction === 1 ? style.right : style.left;
  const avatar = v.direction === 1 ? v.userHeadPic : v.doctorHeadPic;
  // js 中无法判断 字符串是否可以转化为json， 但是我们可以利用报错的特性逻辑进行 判断
  try {
    // 讲字符串转化为 json 数据， 不报错可以转化， 报错的就是不可以转化
    // try { 尝试执行的代码 } catch {  尝试执行的代码发生报错， 这里代码执行  }
    const content = JSON.parse(v.content);
    // 如果转化之后的结果是一个数字， 那么说明这个json 是历史遗留的测试问题， 走下面catch， 抛出异常即可
    if (typeof content === "number") throw new Error();
    return (
      <div>
        {showTime && <div className={style.time}>{formatTimeByCurrentTime(v.askTime)}</div>}
        <div className={classname}>
          <WDImage src={avatar} alt="" className={style.avatar} />
          <div className={style.content}>
            {content.type === "text" && (
              <div className={style.text}>
                {stringReplaceEmoji(content.con)}
              </div>
            )}
            {content.type === "image" && (
              <img src={content.con} alt="" className={style.image} />
            )}
            {content.type === "video" && (
              <video className={style.video} src={content.con} controls></video>
            )}
          </div>
        </div>
      </div>
    );
  } catch {
    return (
      <div>
        {showTime && <div className={style.time}>{formatTimeByCurrentTime(v.askTime)}</div>}
        <div className={classname}>
          <WDImage src={avatar} alt="" className={style.avatar} />
          <div className={style.content}>
            <div className={style.text}>{v.content}</div>
          </div>
        </div>
      </div>
    );
  }
};

{
  /* <div className={style.left}>
<img
  src="https://t12.baidu.com/it/u=951331841,231161650&fm=30&app=106&f=JPEG?w=640&h=639&s=97E2FB01864218EF28BC9D190300C082"
  alt=""
  className={style.avatar}
/>
<div className={style.content}>
  <div className={style.text}>
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文😄本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本😒文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
  </div>
</div>
</div>
<div className={style.right}>
<img
  src="https://t12.baidu.com/it/u=951331841,231161650&fm=30&app=106&f=JPEG?w=640&h=639&s=97E2FB01864218EF28BC9D190300C082"
  alt=""
  className={style.avatar}
/>
<div className={style.content}>
  <div className={style.text}>
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
  </div>
</div>
</div>

<div className={style.left}>
<img
  src="https://img0.baidu.com/it/u=2852972384,536914861&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500"
  alt=""
  className={style.avatar}
/>
<div className={style.content}>
  <img
    src="https://img0.baidu.com/it/u=2852972384,536914861&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500"
    alt=""
    className={style.image}
  />
</div>
</div>
<div className={style.right}>
<img
  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F7325191%2F999fd8bb163bd74ccf8e1cd307fa4304.jpg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvNzMyNTE5MS85OTlmZDhiYjE2M2JkNzRjY2Y4ZTFjZDMwN2ZhNDMwNC5qcGc%3D%2Fsign%2Fde3b8de18ba400d9187e70d3e35de944.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1719996422&t=35fc413c32adf7171e58f42c43ed370d"
  alt=""
  className={style.avatar}
/>
<div className={style.content}>
  <img
    className={style.image}
    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F7325191%2F999fd8bb163bd74ccf8e1cd307fa4304.jpg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvNzMyNTE5MS85OTlmZDhiYjE2M2JkNzRjY2Y4ZTFjZDMwN2ZhNDMwNC5qcGc%3D%2Fsign%2Fde3b8de18ba400d9187e70d3e35de944.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1719996422&t=35fc413c32adf7171e58f42c43ed370d"
    alt=""
  />
</div>
</div>

<div className={style.right}>
<img
  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F7325191%2F999fd8bb163bd74ccf8e1cd307fa4304.jpg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvNzMyNTE5MS85OTlmZDhiYjE2M2JkNzRjY2Y4ZTFjZDMwN2ZhNDMwNC5qcGc%3D%2Fsign%2Fde3b8de18ba400d9187e70d3e35de944.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1719996422&t=35fc413c32adf7171e58f42c43ed370d"
  alt=""
  className={style.avatar}
/>
<div className={style.content}>
  <video className={style.video} src="/测试.mp4" controls></video>
</div>
</div> */
}
